<template>
	<div class="address">
		<header class="bar bar-nav">
  <div class="icon icon-left pull-left" v-on:click="back"></div>
  <router-link to="/addaddress" class="icon pull-right">+</router-link>
  <h1 class="title">收货地址</h1>
</header>
		<!-- 没添加 -->
		<!-- <div class="address-content" v-if="isEmpty">
			<img src="../assets/location.png">
			<p class="address-p">还没有收获地址哦</p>
			<router-link to="/addaddress" class="col-50 address-btn login-button-p"><a href="#" class="button button-success">添加地址</a></router-link>
		</div> -->
		<!-- 已添加 -->
		<div class="address-content2 content">
			<ul>
				<li v-for="(item,i) in addli" :defaultAdd="item.defaultAdd">
					<div class="add_head">
						<input type="radio" name="mr" v-on:click="checkedFn(i)" :value="item.id" v-model="checked">
						<span class="head_name">{{item.name}}</span>
						<span class="head_phone">{{item.phone}}</span>
						<span class="head_phone2">{{item.phone2}}</span>
					</div>
					<!-- <div class="add_del">×</div> -->
					<p class="add_footer item-title label">{{item.place}}</p>
				</li>
			</ul>
			
		</div>
		<!-- <addresscard></addresscard> -->
	</div>
</template>
<script type="text/javascript">
import ThemeHeader from "../pages/home/component/themeHeader.vue";
	export default {
		data(){
			return{
				// isEmpty:true,
				addli:{},
				checked:"",
			}
		},
		components:{
			ThemeHeader,
			// Addresscard
		},
		methods:{
			back:function(){
				history.back();
			},
			checkedFn:function(i){
				var addObj={id:this.addli[i]["id"],name:this.addli[i]["name"],phone:this.addli[i]["phone"],phone2:this.addli[i]["phone2"],place:this.addli[i]["place"],defaultAdd:this.addli[i]["defaultAdd"]};
				var str=JSON.stringify(addObj);
                localStorage.setItem("defaultAddress",str);
			}
		},
		mounted(){ 

			 if(getCookie().userName==true){
			 	var $del = $(".add_del");
			  	var _this=this;
				$.ajax({
					type:"post",
					url:"http://localhost:8088/shop2/add-addressp.php",
					data:{type:"get"},
					dataType:"json",
					success:function(data){
						// console.log(data);
						_this.addli=data.data;
						_this.addli.forEach(function(i){ 	
							 	if(i["defaultAdd"]==1){
							 		var addObj={id:i["id"],name:i["name"],phone:i["phone"],phone2:i["phone2"],place:i["place"],defaultAdd:i["defaultAdd"]};
							 		var str=JSON.stringify(addObj);
                   					 localStorage.setItem("defaultAddress",str);
							 		_this.checked=i['id'];
							 	}
							 	
						 });
					}
				});
 			}else{
		    	this.$router.push("/login");
		    }
		     
					
		  
		    
				
		},
	}
</script>
<style type="text/css">
	.address-content{
		width: 100%;
		text-align: center;
	}
	.address-content img{
		width: 25%;
		margin-top: 50%;
	}
	.address-content .login-button-p{
		padding-top: 1rem;
	}
	.address-p{
		margin-top: 1.5rem;
		color: #ccc;
	}
	.address-btn .button{
		padding-top: 1rem;
		height: 2.5rem;
		width: 7rem;
		padding-top: 0.6rem;
		border: 1px solid #a7bda8;
		box-shadow: 0 0.1rem 0.08rem 0 #ccc;
	}
	.address-content2 ul li{
		padding: 0.5rem;
		font-size: 0.85rem;
		border-bottom: 0.01rem solid #ddd;
	}
	.address-content2 span{
		color: black;
		display: inline-block;
		padding-right: 0.8rem;
	}
	.address-content2 p{
		padding-top: 0.5rem;
		color: #666;
		height: 35px;
		display:block;
		white-space:nowrap; 
		overflow:hidden; 
		text-overflow:ellipsis;
	}
	.add_del{
		float: right;
		font-size: 1.5rem;
		/*color: red;*/
	}
</style>